import React from 'react';
import {View,Text} from 'react-native'

import {deleteCart,update} from '../actions'
import { Container, Header, Content, List, ListItem, Thumbnail,Left, Body, Right, Button,Input} from 'native-base';
import {connect} from 'react-redux';

const mapStateToProps=(state)=>{
    return{
        cart:state.carts
    }
}
class ListIteml extends React.Component{ 
    constructor(){
        super()
        this.state={
            num:1
        }
    }

    handlerChange(e){
        this.setState({
            num:e.target.value
        })
    }

    onChangem(value,id){
        console.log(this.props)
        console.log('changed', value);
       this.props.update(value,id)
    }
    deleProductToCart=(id)=>{
        // console.log('carts',carts);
        // console.log(id);
        this.props.deleteCart(id);
    }
    render(){
        console.log(this.props.list);
        const {title,img,content,time,stars}=this.props.item;
        // console.log(quantity);
        return(
            <Content>
          <List>
            <ListItem thumbnail>
              <Left>
                <Thumbnail square source={{ uri:img }} />
              </Left>
              <Body>
                <Text>{title}</Text>
                <Text note numberOfLines={2}>{content}</Text>
                <Text>￥{stars.number}元</Text>
                <Input type="text" value={this.state.num} onChangeText={(e)=>this.handlerChange(e)} onBlur={()=>this.onChangem(+this.state.num,this.props.id)} ></Input>
              </Body>
              <Right>
                <Button transparent>
                  <Text>删除</Text>
                </Button>
              </Right>
            </ListItem>
          </List>
        </Content>
        )
    }
}
class Cart extends React.Component{
    // constructor(){
    //     super()
    //     this.state={
    //         showH3:"block",
    //         showH4:"none"
    //     }
    // }

    getlist(){
        const {cart}=this.props;
        var jsx=[];
        if(cart.length>0){
            for(var i=0;i<cart.length;i++){
                jsx.push(<ListIteml key={i} {...cart[i]}/>)
            }
        }
        return jsx;
    }
    // componentDidMount(){
    //     console.log(this.props.cart);
    //     if(this.props.cart.length>0){
    //      this.setState({
    //          showH3:"none",
    //          showH4:"block"
    //      })   
    //     }
    // }
    // handerMan(carts){
    //     console.log('carts',carts);
    // }
   render(){
       return(
           <View>
               {/* <Text style={{display:this.state.showH3}}>购物车,空空如也,快去添加物品</Text> */}
               {this.getlist()}
               <Button rounded onPress={()=>this.handerMan(this.props)}>账单提交</Button>
           </View>
       )
    }
}

export default connect(mapStateToProps,{deleteCart,update})(Cart);